<template>
  <van-card @click="$router.push('/jump')" :centered="true">
    <template #thumb>
      <van-image
        radius
        width="30vw"
        height="25vw"
        :src="'http://liufusong.top:8080/' + item.houseImg"
      />
    </template>
    <template #tags>
      <van-tag plain type="danger">{{ item.tags[0] }}</van-tag>
    </template>
    <template #title>
      <p>{{ item.title }}</p>
    </template>
    <template #desc>
      <p class="box">{{ item.desc }}</p>
    </template>
    <template #price>
      <span>{{ item.price }}<i>元/月</i></span>
    </template>
  </van-card>
</template>

<script>
export default {
  name: 'Commodity',
  props: {
    item: {
      type: Object
    }
  }
}
</script>

<style scoped lang="less">
.box{
  color: #ccc;
  font-size: 3vw;
  margin-left: 15vw;
  text-align: left;
}
span {
  margin-left: 16vw;
  font-size: 4vw;
  color: red;
  i {
    font-size: 3vw;
  }
}
p {
  text-align: center;
  width: 50vw;
  margin: 0;
  height: 5vw;
  margin-left: -5vw;
}
.van-card {
  height: 30vw;
}
/deep/ .van-tag {
  // margin-left: 17vw;
  margin-top: 4vw;
  background-color: #e1f5f8;
  color: #50c6d3 !important;
}
/deep/ .van-image {
  margin-right: 25vw;
}
</style>
